<template>
  <div class="travel-view">
    <div id="main"></div>
  </div>
</template>

<script>
import getJson from '../../assets/data.json'
import { mapview } from '../../Api/api.js'
export default {
  data() {
    return {}
  },
  created() {
    mapview().then((res) => {
      if (res.data.status == 200) {
        let { points, linesData } = res.data.data
        this.draw(points, linesData)
      }
    })
  },
  methods: {
    draw(points, linesData) {
      // echarts图标的注册
      let myChart = this.$echarts.init(document.getElementById('main'))
      // 地图的注册
      this.$echarts.registerMap('china', getJson) //注册地图类型的时候必须有geo组件或者图表类型
      console.log(getJson)
      let option = {
        backgroundColor: 'rgb(121,145,209)',
        geo: {
          map: 'china',
          aspectScale: 0.75, //scale地图的长宽比
          // 每一块板块的颜色
          itemStyle: {
            // 正常版
            normal: {
              // 区域颜色
              areaColor: {
                // 类型是镜像渐变
                type: 'radisl',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: '#09132c', // 在0%处的颜色
                  },
                  {
                    offset: 1,
                    color: '#274d68', // 在100%处的颜色
                  },
                ],
                globalCoord: true,
              },
              // 使得地图具有层级结构
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 10,
            },
          },
          zoom: 1.1, //缩放比
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                opacity: 0.8,
              },
            },
          ],
        },
        series: [
          // 关于地图的相关配置
          {
            // 配置地图的相关参数，这个对象是相关于地图图表的设置
            type: 'map',
            zoom: 1.1,
            map: 'china',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#1de9b6',
                },
              },
              emphasis: {
                textStyle: {
                  color: 'rgb(183,185,14)',
                },
              },
            },
            itemStyle: {
              // 正常版
              normal: {
                backgroundColor: 'rgb(147,235,248)',
                borderWidth: 1,
                // 区域颜色
                areaColor: {
                  // 类型是镜像渐变
                  type: 'radisl',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgb(31,54,150)', // 在0%处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgb(89,128,142)', // 在100%处的颜色
                    },
                  ],
                  globalCoord: true,
                },
              },
              // 设置其高亮的效果
              emphasis: {
                areaColor: 'rgb(46,229,206)',
                borderWidth: 0.1,
              },
            },
          },
          // 关于地图中散点的相关配置
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render', //在绘制完成后显示特效
            symbolSize: 10, //设置散点的大小
            zlevel: 1,
            data: points,
            rippleEffect: {
              //涟漪特效的相关配置
              period: 15, //特效的时间
              scale: 4, //缩放比例
              brushType: 'fill', //波纹的绘制方式
            },
          },
          // 关于地图中的线图的相关配置
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4,
              symbol: 'arrow', //箭头样式
              symbolSize: 7,
              trailLength: 0.4, //有一个箭头拖尾的样式
            },
            // 线样式
            lineStyle: {
              normal: {
                color: '#1de9b6',
                width: 1,
                opacity: 0.1,
                curveness: 0.8, //线的弯曲度
              },
            },
            data: linesData,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss">
.travel-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
  }
}
</style>
